<!--
 * @Author: wangyu
 * @Date: 2024-12-25 15:39:32
 * @LastEditTime: 2024-12-28 12:05:22
 * @LastEditors: wangyu
 * @Description: 实时监控
 * @FilePath: \dzsq-smartpark-platform\src\views\realtimeMonitoring\index.vue
-->
<template>
  <div class="realtimeMonitoring">
    <div>
      <comHeaer title="实时监控"></comHeaer>
      <el-row class="realtimeMonitoring-list" :gutter="24">
        <el-col
          v-for="item in list"
          :key="item.name"
          :span="6"
          style="margin-bottom: 36px"
        >
          <div class="realtimeMonitoring-list-item" @click.stop="showBig(item)">
            <img :src="item.img" />
          </div>
          <div class="realtimeMonitoring-list-name">{{ item.name }}</div>
        </el-col>
        <div id="bigVideo">
          <video
            ref="video"
            id="hlsVideo"
            controls
            autoplay
            style="display: none; width: 100%; height: 100%"
          ></video>
          <el-icon
            :size="36"
            color="rgba(255,255,255,0.5)"
            style="position: absolute; right: -8px; top: -8px; cursor: pointer"
            @click="showBig"
            ><CircleClose
          /></el-icon>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import comHeaer from "./components/comHeader.vue";
import _u1642 from "@/assets/imgs/1_u1642.svg";
import Hls from "hls.js";
import { onMounted } from "vue";

const hls = ref(null);
const video = ref(null);
const nowVideo = ref({});
const list = ref([
  {
    name: "园区室外-C1",
    img: _u1642,
    url: "https://open.ys7.com/v3/openlive/K73054561_11_1.m3u8?expire=1783517196&id=734159212504297472&t=124ca2dbaa2fe46613d50138f688e452269506a103b63a64286f5bb38f201dc3&ev=100",
  },
  {
    name: "园区室外-C2",
    img: _u1642,
    url: "https://open.ys7.com/v3/openlive/K73054561_2_1.m3u8?expire=1783517284&id=734159583441858560&t=64eee947dfee8a3a25962ddb5f571646ac1066d41dd08ef2f9d648c0819bd8a5&ev=100",
  },
  {
    name: "园区室外-B2",
    img: _u1642,
    url: "https://open.ys7.com/v3/openlive/K73054561_10_1.m3u8?expire=1783517482&id=734160413570117632&t=4c7bc8842c6c399ecc1a9c2e1f2fb439229bbb22e8ba56aa8a7447b38b400bec&ev=100",
  },
  {
    name: "园区室外-A2",
    img: _u1642,
    url: "https://open.ys7.com/v3/openlive/K73054561_12_1.m3u8?expire=1783517522&id=734160580281540608&t=c6760dfce566af88f59713cbcda91ccdcf0fafec0a7b8cdb2520ed1b5fde3b43&ev=100",
  },
  {
    name: "园区204-厂房",
    img: _u1642,
    url: "https://open.ys7.com/v3/openlive/K73054561_16_1.m3u8?expire=1783517559&id=734160736383021056&t=34738d3749314d3eb3c7df9d05593298fa59d32ea06802797921bb4462a9b9af&ev=100",
  },
  {
    name: "园区201-厂房",
    img: _u1642,
    url: "https://open.ys7.com/v3/openlive/K73054561_15_1.m3u8?expire=1783517590&id=734160866536468480&t=713673702670ff272c968a4416a320cd6623efe66e210defc0b53a1859cab959&ev=100",
  },
  {
    name: "园区室外-C1",
    img: _u1642,
    url: "https://open.ys7.com/v3/openlive/G75861492_1_1.m3u8?expire=1783517921&id=734162253334450176&t=0314e0da2c4412ac3bba897b24ff876c750a6688445ff5150f62afb4f571903c&ev=100",
  },
  {
    name: "园区室外-B1",
    img: _u1642,
    url: "https://open.ys7.com/v3/openlive/G75861492_3_1.m3u8?expire=1783518080&id=734162921399005184&t=5da4d80a839f9f51eec633d1b42549f37ae1d9290528817ddb4c265251bb9e13&ev=100",
  },
]);
const showBig = ({ name, url }) => {
  nowVideo.value.name = name;
  const dom = document.getElementById("bigVideo");
  if (dom.clientWidth === "0" || dom.clientWidth === 0) {
    dom.style.left = "40px";
    dom.style.top = "-16px";
    dom.style.bottom = "16px";
    dom.style.width = "calc(100% - 76px)";
    dom.style.display = "block";
    video.value.style.display = "block";
    // 播放视频
    if (Hls.isSupported()) {
      hls.value.loadSource(url);
      hls.value.attachMedia(video.value);
    } else if (video.value.canPlayType("application/vnd.apple.mpegURL")) {
      video.value.src = url;
    }
  } else {
    dom.style.width = "0";
    dom.style.display = "none";
    video.value.style.display = "none";
    // 播放视频
    if (Hls.isSupported()) {
      hls.value.pause();
    } else if (video.value.canPlayType("application/vnd.apple.mpegURL")) {
      video.value.pause();
    }
  }
};
onMounted(() => {
  // todo创建视频播放器对象
  video.value = document.getElementById("hlsVideo");
  if (Hls.isSupported()) {
    hls.value = new Hls();
    hls.value.on(Hls.Events.MANIFEST_PARSED, () => {
      video.value.play();
    });
  } else if (video.value.canPlayType("application/vnd.apple.mpegURL")) {
    video.value.addEventListener("loadedmetadata", () => {
      video.value.play();
    });
  }
});
</script>
<style scoped lang="scss">
.realtimeMonitoring {
  padding: 0 48px 48px 48px;
  > div {
    position: relative;
    background-image: url("@/assets/imgs/u1641.svg");
  }
  &-list {
    padding: 36px;
    &-item {
      height: 240px;
      overflow: hidden;
      cursor: pointer;
      > img {
        width: 100%;
        height: 100%;
      }
    }
    &-name {
      font-size: 28px;
      margin-top: 16px;
      text-align: center;
    }
  }
  #bigVideo {
    position: absolute;
    display: none;
    width: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9;
    > img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
